<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>

        <button v-on:click="error = !error">点击1</button>
        <button v-on:click="sucess = !sucess">点击2</button>
       <!--  <p v-if="error">网络连接错误404</p>
        <p v-else-if="sucess">网络连接成功code1</p> -->
        <!-- 
            v-show 和  v-if 的区别
            v-show 会有占位符，会根据状态给当前元素添加 display:none 
            v-if  不会有这样的问题
         -->
        <p v-show="error">网络连接错误404</p>
        <p v-show="sucess">网络连接成功code1</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                title:"v-if 和 v-show",
                error:false,
                sucess:false
            },
            methods:{
               /*  errorA:function(){
                    console.log(1);
                    this.error = !this.error;
                },
                sucessA:function(){
                    console.log(2);
                    this.sucess = !this.sucess;
                } */
            },
            computed:{
                
            }
        })
    </script>
</body>
</html>